<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>ui5-list / ui5-li</title>


	<script src="%VITE_BUNDLE_PATH%" type="module"></script>


	<script>// delete Document.prototype.adoptedStyleSheets;</script>
	<link rel="stylesheet" type="text/css" href="./styles/ListGrowing_Scroll.css">

	<style>
		[ui5-avatar] img {
			object-fit: contain;
		}
	</style>
</head>

<body class="listgrowing_scroll1auto">
	<ui5-title>List growing="Scroll" max-height: 10.5rem;</ui5-title>
	<br><br><br>

	<section class="listgrowing_scroll2auto">
		<ui5-list id="infiniteScrollEx" growing="Scroll">
			<ui5-li-group header-text="New Items">
				<ui5-li icon="navigation-right-arrow" additional-text="Available">Voluptate do eu cupidatat elit est culpa. Reprehenderit eiusmod voluptate ex est dolor nostrud Lorem Lorem do nisi laborum veniam. Sint do non culpa aute occaecat labore ipsum veniam minim tempor est. Duis pariatur aute culpa irure ad excepteur pariatur culpa culpa ea duis occaecat aute irure. Ipsum velit culpa non exercitation ex laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore.
					<ui5-avatar slot="image" shape="Square">
						<img src="./img/HT-1000.jpg" alt="Woman image">
					</ui5-avatar>
				</ui5-li>
				<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">Laptop Lenovo
					<ui5-avatar slot="image" shape="Square">
						<img src="./img/portrait.jpg" alt="Woman image">
					</ui5-avatar>
				</ui5-li>
				<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131"  additional-text-state="Information">IPhone 3
					<ui5-avatar slot="image" shape="Square">
						<img src="./img/HT-1022.jpg" alt="Woman image">
					</ui5-avatar>
				</ui5-li>
			</ui5-li-group>

			<ui5-li-group header-text="Discounted Items">
				<ui5-li icon-end icon="navigation-right-arrow" description="#12331232131"  additional-text="Required" additional-text-state="Negative">HP Monitor 24
					<ui5-avatar slot="image" shape="Square">
						<img src="./img/HT-1030.jpg" alt="Woman image">
					</ui5-avatar>
				</ui5-li>
				<ui5-li icon-end icon="navigation-right-arrow" description="#12331232131"  additional-text="Available" additional-text-state="Positive">Audio cabel
					<ui5-avatar slot="image" shape="Square">
						<img src="./img/HT-2026.jpg" alt="Woman image">
					</ui5-avatar>
				</ui5-li>
				<ui5-li icon-end icon="navigation-right-arrow" additional-text="Required" additional-text-state="Critical">DVD set
					<ui5-avatar slot="image" shape="Square">
						<img src="./img/HT-2002.jpg" alt="Woman image">
					</ui5-avatar>
				</ui5-li>
			</ui5-li-group>
		</ui5-list>
	</section>


	<br><br><br>
	<ui5-title>List growing="Scroll" max-height: 8rem;</ui5-title>
	<br><br><br>
	<ui5-list id="infiniteScrollEx2" growing="Scroll" class="listgrowing_scroll3auto">
		<ui5-li-group header-text="New Items">
			<ui5-li icon="navigation-right-arrow" additional-text="Available">Voluptate do eu cupidatat elit est culpa. Reprehenderit eiusmod voluptate ex est dolor nostrud Lorem Lorem do nisi laborum veniam. Sint do non culpa aute occaecat labore ipsum veniam minim tempor est. Duis pariatur aute culpa irure ad excepteur pariatur culpa culpa ea duis occaecat aute irure. Ipsum velit culpa non exercitation ex laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore.</ui5-li>
			<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">Laptop Lenovo</ui5-li>
			<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131"  additional-text-state="Information">IPhone 3</ui5-li>
		</ui5-li-group>

		<ui5-li-group header-text="Discounted Items">
			<ui5-li icon-end icon="navigation-right-arrow" description="#12331232131"  additional-text="Required" additional-text-state="Negative">HP Monitor 24</ui5-li>
			<ui5-li icon-end icon="navigation-right-arrow" description="#12331232131"  additional-text="Available" additional-text-state="Positive">Audio cabel</ui5-li>
			<ui5-li icon-end icon="navigation-right-arrow" additional-text="Required" additional-text-state="Critical">DVD set</ui5-li>
		</ui5-li-group>
	</ui5-list>

	<ui5-title>List growing="Scroll"</ui5-title>
	<br><br><br>
	<ui5-list id="infiniteScrollEx3" growing="Scroll">
		<ui5-li-group header-text="New Items">
			<ui5-li icon="navigation-right-arrow" additional-text="Available">Voluptate do eu cupidatat elit est culpa. Reprehenderit eiusmod voluptate ex est dolor nostrud Lorem Lorem do nisi laborum veniam. Sint do non culpa aute occaecat labore ipsum veniam minim tempor est. Duis pariatur aute culpa irure ad excepteur pariatur culpa culpa ea duis occaecat aute irure. Ipsum velit culpa non exercitation ex laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore.</ui5-li>
			<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">Laptop Lenovo</ui5-li>
			<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131"  additional-text-state="Information">IPhone 3</ui5-li>
		</ui5-li-group>

		<ui5-li-group header-text="Discounted Items">
			<ui5-li icon-end icon="navigation-right-arrow" description="#12331232131"  additional-text="Required" additional-text-state="Negative">HP Monitor 24</ui5-li>
			<ui5-li icon-end icon="navigation-right-arrow" description="#12331232131"  additional-text="Available" additional-text-state="Positive">Audio cabel</ui5-li>
			<ui5-li icon-end icon="navigation-right-arrow" additional-text="Required" additional-text-state="Critical">DVD set</ui5-li>
		</ui5-li-group>
	</ui5-list>

	<script>
		'use strict';

		function template(i) {
			var li = document.createElement("ui5-li");
			li.textContent = "Title";
			li.description = "my description goes here " + i;
			li.additionalText = "Available";
			return li;
		}

		function insertItems(el, num) {
			for(var i= 0; i<num; i++) {
				el.appendChild(template(i));
			}
		}

		[].slice.call(document.querySelectorAll("ui5-list"), this).forEach(function(list) {
			list.addEventListener("ui5-load-more", function(e) {
				var el = list;
				el.busy = true;

				setTimeout(function() {
					insertItems(el, 3);
					el.busy = false;
				}, 1000);
			});
		});
	</script>
</body>
</html>
